<template>
	<div class="grid-layout-container">
        <el-card class="box-card">
			<template #header>
				<div class="card-header flex-startCenter ">
					<span>购买用户统计</span>
				</div>
			</template>
			<grid-layout v-model:layout="state.layouts" :col-num="1" :row-height="360"
				:is-draggable="true" :is-resizable="false" :is-mirrored="false"
				:vertical-compact="true" :margin="[0, 0]" :use-css-transforms="true">
				<grid-item v-for="item in state.layouts"
					:x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i">
					<div class="flex" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
						<PieChart :data="state.data" /> 
					</div>
				</grid-item>
			</grid-layout>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="funGridLayout">
	import {reactive, onMounted, watch, nextTick, onActivated, ref, defineAsyncComponent } from 'vue';
const PieChart = defineAsyncComponent(() => import('/@/views/notice/wxAuthorize/components/Pie.vue'));
// 定义变量内容
const state = reactive({
	layouts: [
		{ x: 0, y: 0, w: 1, h: 1, i: '购买用户' },
	],
	myCharts: [] as EmptyArrayType,
	charts: {
		theme: '',
		bgColor: '',
		color: '#303133',
	},
	data: [
		{ value: 40, name: '监测设备预警' },
		{ value: 38, name: '天气预警' },
		{ value: 32, name: '任务预警' },
		{ value: 30, name: '病虫害预警' },
	]
});
</script>

<style scoped lang="scss">
.grid-layout-container {
    
	.vue-grid-item {
		color: var(--el-color-white);
	}
}
</style>
